<template>
  <div class="environment-info container-bottom-20">
    <CardBox title="观测统计"></CardBox>
    <div class="content-container">
      <div class="observation-statistics-layout">
        <div class="statistics-chart" ref="statisticsChart"></div>
      </div>
    </div>
  </div>
</template>

<script>
import CardBox from '@/components/Global/CardBox.vue'
import * as echarts from 'echarts'
import {EventBus} from "../../utils/event-bus";
let that;
export default {
  name: 'ObservationStatistics',
  components: {
    CardBox
  },
  created() {
    that=this;
    EventBus.$on('set-device-type', (message) => {
      this.type=message;
      this.getData();
    });
  },
  data() {
    return {
      type:'hongwai',
      contrast:null,
      chartData: []
    }
  },
  watch: {
    '$route.query': {
      handler(newQuery, oldQuery) {
        // 当路由的query参数发生变化时，执行这里的代码
        console.log('New query:', newQuery);
        console.log('Old query:', oldQuery);
        this.type=newQuery.deviceType;
        this.getData();
      },
      deep: true, // 设置为true以深度观察对象内部的变化
      immediate: true // 组件创建时立即执行一次
    }
  },
  mounted() {
    this.type=this.$route.query.deviceType;
    console.error("this.route.params:"+this.route.params)
    this.$nextTick(() => {
      this.getData();
    })
  },
  methods: {
    getData(){
      this.$api.species.getContrast(this.type).then(res => {
        this.contrast = res;
        this.contrast.data.label={
          show: true,
                  position: 'top',
                  formatter: '{b}',
        };
        this.initChart();
      });
    },
    initChart() {
      const chartDom = this.$refs.statisticsChart;
      if (!chartDom) return;
      this.contrast.data[this.contrast.data.length-1].label= {
        show: true,
        position: 'top',
        formatter: '{b}'
      };
      const chart = echarts.init(chartDom)
      const option = {
          grid: {
            top: '15%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,24,106,0.8)',
          borderColor: 'rgba(0,150,255,0.3)',
          textStyle: {
            color: '#fff',
            fontFamily: 'DIN Pro'
          }
        },
          xAxis: {
            type: 'category',
            data: this.contrast.category,
            axisLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.3)'
              }
            },
            axisTick: {
              show: false
            },
            // axisLabel: {
            //   color: '#fff',
            //   fontSize: 12,
            //   verticalAlign: 'top'
            // },
            axisLabel: {
              show:false,
              position: 'top' // 设置标签显示在柱子上方
            }
          },
          yAxis: {
            type: 'value',
            // max: 250,
            // interval: 50,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#fff',
              fontSize: 12,
              fontFamily: 'DIN Pro'
            }
          },
        series: this.contrast.data
      };
      chart.setOption(option)
      chart.on("click", function (params) {
        console.log(params); // 这里可以处理点击事件，例如显示提示框等。
        EventBus.$emit('sent-device-id-to-right', {id:that.contrast.deviceId[params.dataIndex]})
      });
    }
  }
}
</script>

<style scoped lang="scss">
.observation-statistics-layout {
  height: 242px;
  padding: 10px;
}
.statistics-chart {
  width: 100%;
  height: 100%;
}
</style>

